import {useState} from 'react'
import { useNavigate } from 'react-router-dom'
import './index.scss'
import axios from '@/axios'
import { message } from 'antd';
import {
  UserOutlined ,UnlockOutlined
} from '@ant-design/icons';
export default function Login() {
    const nav= useNavigate()
    //用户名
    const [name,setName] =useState<string>('admin')
    //密码
    const [password,setPassword] = useState<string>('123456')
    //复选框状态
    const [flag,setflag] = useState<boolean>(true)
   const [msg,setmsg] = useState<string>('')
    const [messageApi, contextHolder] = message.useMessage();
    const key = 'updatable';
  //成功提示
    const openMessage = () => {
      messageApi.open({
        key,
        type: 'success',
        content:msg,
      });
    }
    //错误提示
    const error = () => {
      messageApi.open({
        type: 'error',
        content: msg,
      });
    };
        async function login() {
            const  data:any  = await axios.post('/login', { name, password });
            sessionStorage.setItem('accessToken', data.dtoken);
            sessionStorage.setItem('refreshToken', data.ctoken);
           
         
           setmsg(data.msg)
            if(data.code===200) {
              sessionStorage.setItem('menu', JSON.stringify(data.menu));
              sessionStorage.setItem('list', JSON.stringify(data.list));
              openMessage()
                nav('/app/home')
            }else{
             error()
            }
           }
  return (
    <div className='pzblogin'>
         {contextHolder}
      <div className='box1'>
      <h1>欢迎登录</h1>
      <div className='content'>
      <span className='span'><UserOutlined   style={{color: "#CC352F"}} /> </span>   <input value={name} className='input' onChange={(e)=>{setName(e.target.value)}} placeholder='请输入账号'></input><br></br>
    <span className='span'> <UnlockOutlined style={{color: "#CC352F"}} /></span>   <input  value={password} className='input' onChange={(e)=>{setPassword(e.target.value)}}  placeholder='请输入密码'></input><br></br>
        <input type='checkbox' checked={flag} onChange={(e)=>{setflag(e.target.checked)}}></input> <span>记住密码</span><br></br>
        <button  onClick={login}>登录</button>
      </div>
      </div>
    </div>
  )
}
